<!--
  - Copyright (c) 2018.
  - 北京九思金信科技有限公司对该文件内容保留所有权利。
  - 未经许可，不得私自拷贝、传播、发布、引用该文件内容，违者将被追究法律责任。
  -->

<template>
    <div v-if="editable">
        <el-select size="small"
                   v-model="changeType"
                   :disabled="!editable"
                   :clearable="clearable"
                   :placeholder="placeholder"
                   @change="onChange"
                   multiple>
            <el-option v-for="item in options"
                       :key="item.value"
                       :label="item.label"
                       :value="item.value"/>
        </el-select>
    </div>
    <div v-else>
        <span v-for="name in changeTypeNames"
              :key="name"
        style="margin-right: 2%">
            {{name}}
        </span>
    </div>

</template>

<script>
    export default {
        name: "FtCustomerChangeType",
        props: {
            value: {
                type: String,
                default: null,
            },
            serviceName: {
                type: String,
                default: null
            },
            editable: {
                type: Boolean,
                default: false
            },
            clearable: {
                type: Boolean,
                default: true
            },
            placeholder: {
                type: String,
                default: '请选择变更类型'
            },
        },
        data() {
            return {
                typeName: 'customerChangeType',
                options: [],
                changeType: this.value,
                changeTypeNames: [],
            }
        },
        mounted() {
            this.loadChangeTypeEnumList()
            this.loadValue()
        },
        watch: {
            value() {
                this.loadValue()
            },

        },
        methods: {
            // 加载所有的枚举选项
            loadChangeTypeEnumList() {
                this.$http.get('/joys-rest/' + this.serviceName + '/enums/' + this.typeName + '/items').then(
                    resp => {
                        this.options = resp.body
                    }, resp => {
                        this.$message.error(resp.body.message)
                    }
                )
            },
            loadValue() {
                const enumItem = []
                const enumNames = []
                // 将父组件传过来的值转换为数组的形式,以便el-select可以识别
                if (this.value) {
                    let selectedValue = this.value.split(';');
                    selectedValue.forEach((val) => {
                        val && this.options && this.options.find((item) => {
                            if (item.value === val) {
                                enumItem.push(item.value)
                                enumNames.push(item.label)
                                // 匹配成功,推出本次循环,进入下次循环
                                return
                            }
                        })
                    })
                    this.changeType = enumItem
                    this.changeTypeNames = enumNames
                }

            },
            onChange() {
                // 返回父组件值时,先将选中的结果转换为数据库中存的数据的形式(AA;BB;CC;)
                let result = ''
                if (this.changeType) {
                    this.changeType.forEach((val) => {
                        // 拼接字符串
                        result = result.concat(val).concat(';')
                    })
                }
                this.$emit('input', result)
                this.$emit('change', result)
            }
        },

    }
</script>

<style scoped>

</style>
